<template>
  <div class="paper pad">
    <div class="head">
      <span>调查问卷设置</span>
    </div>
    <el-form :model="paper" ref="paper" :rules="rules" label-position="top">
      <el-form-item label="问卷编号" prop="id">
        <el-input v-model="paper.id" />
      </el-form-item>
      <el-form-item label="问卷名称" prop="name">
        <el-input v-model="paper.name" />
      </el-form-item>
      <el-form-item label="周期设置">
        <el-input-number v-model="paper.period" :min="0" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="问卷内容" prop="questions" ref="ques">
        <el-select  style="width: 100%;" v-model="paper.questions" multiple @change="questionChange">
          <el-option v-for="item in questions" :label="item.name" :value="item.labelQuestionId" :key="item.labelQuestionId"></el-option>
        </el-select>
        <!-- <el-tabs type="border-card">
          <el-tab-pane label="选择题">
            <el-form-item prop="questions">
              <el-select filterable style="width: 100%;" v-model="paper.questions" multiple>
                <el-option v-for="item in questions" :label="item.name" :value="item.labelQuestionId" :key="item.labelQuestionId"></el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane disabled label="填空题">
            <el-input class="blank" v-for="(item, i) in paper.blanks" v-model="item.value" :key="i">
              <el-button @click="deleteBlank(i)" v-if="paper.blanks.length > 1" icon="el-icon-delete" slot="append"></el-button>
            </el-input>
            <el-button @click="addBlank" type="default">添加</el-button>
          </el-tab-pane>
        </el-tabs> -->
      </el-form-item>
      <el-button @click="submitPaper('paper')" type="primary">保存</el-button>
    </el-form>
  </div>
</template>
<script>
import { notifySuccess } from '../util'
import {
  addPaper,
  getAllQuestion
} from '../api'

export default {
  name: 'paper',
  data () {
    const validateQuestion = (rules, value, callback) => {
      console.log(value)
    };
    return {
      letters: ['A', 'B', 'C', 'D'],
      questions: [],
      rules: {
        id: [
          { required: true, message: '该项不能为空!', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '该项不能为空!', trigger: 'blur' }
        ],
        questions: [
          { required: true, message: '该项不能为空！', trigger: 'blur' }
        ]
      },
      paper: {
        id: '',
        name: '',
        period: '',
        questions: ''
      }
    }
  },
  methods: {
    clearMessage () {
      this.paper.id = '';
      this.paper.name = '';
      this.paper.questions = '';
    },
    addBlank () {
      this.paper.blanks.push({
        value: ''
      })
    },
    questionChange (e) {
      console.log(this.$refs.ques);
      if (e.length) {
        this.$refs.ques.clearValidate()
      }
    },
    deleteBlank (index) {
      for (let i = 0; i < this.paper.blanks.length; i++) {
        if (i === index) {
          this.paper.blanks.splice(index, 1)
          break
        }
      }
    },
    submitPaper (form) {
      if (!this.$checkAuth('canAddQuestionnaire')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          addPaper({
            name: this.paper.name,
            number: this.paper.id,
            cycle: this.paper.period,
            labelQuestionIds: this.paper.questions
          })
          .then(res => {
            if (res.data.code === 1) {
              notifySuccess(this)
            } else {
              return false
            }
            clearMessage();
          })
          .catch(e => {
            this.$message.error('网络异常!')
          })
        } else {
          return false
        }
      })
    },
    fetchQuestions (type) {
      getAllQuestion(type)
      .then(res => {
        if (res.data.code === 1) {
          this.questions = res.data.data || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchQuestions(2)
  }
}
</script>
<style lang="scss">
  .paper {
    .blank {
      margin: 20px 0;
    }
  }
</style>
